<extend name="Public/base"/>

<block name="body">
    <link rel="stylesheet" type="text/css" href="__CSS__/index.css">
    <link rel="stylesheet" type="text/css" href="__CSS__/upload.css">
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>

    <div class="main-title">
        <h2>{$meta_title}</h2>
    </div>
    <form action="" method="post" class="form-horizontal">
        <input type="hidden" name="id" id="id" value="{$data['id']}">
        
        <div class="form-item">
            <label class="item-label">广告图</label>
            <div class="controls">

                <div class="img-box full">
                    <section class=" img-section">
                        <!--<p class="up-p">作品图片：<span class="up-span">最多可以上传5张图片，马上上传</span></p>-->
                        <div class="z_photo upimg-div clear" >
                            <?php if(!empty($data)):?>
                            <section class="up-section fl">
                                     <span class="up-span"></span>
                                     <img src="__PUBLIC__/Admin/images/a7.png" class="close-upimg">
                                     <img src="__ROOT__{$data['img_url']}" class="up-img">
                                 <p class="img-namep"></p>
                                 <input id="taglocation" name="taglocation" value="" type="hidden">
                                 <input id="tags" name="tags" value="" type="hidden">
                             </section>
                            <?php endif;?>
                            <section class="z_file fl" style="<?php if(!empty($data)){echo "display: none;";}?>">
                                
                                <img src="__PUBLIC__/Admin/images/a11.png" class="add-img">
                               
                                <input type='hidden' name='img_url' value="{$data['img_url']}" class='img-url js-pic_url' >
                                <input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
                            </section>
                        </div>
                    </section>
                </div>
                <aside class="mask works-mask">
                    <div class="mask-content">
                        <p class="del-p">您确定要删除图片吗？</p>
                        <p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
                    </div>
                </aside>
            </div>
        </div>
        <div class="form-item">
            <label class="item-label">网址</label>
            <div class="controls">
                <input type="text" class="text input-large" name="jump_url" value="{$data['jump_url']}" placeholder="http://">
            </div>
        </div>
        <div class="form-item">
            <label class="item-label">排序(数字越小，越靠前)</label>
            <div class="controls">
                <input type="text" class="text input-large" name="sort" value="{$data['sort']}" placeholder="默认99，排序值越小越靠前">
            </div>
        </div>
        <div class="form-item">
            <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">提交</button>
            <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
        </div>
    </form>
</block>

<block name="script">
    <script type="text/javascript">
        //导航高亮
        highlight_subnav('{:U('Guanggao / index')}');
    </script>

    <script type="text/javascript">
        $(function () {
            var maxupload = 1;
            var delParent;
            var defaults = {
                fileType: ["jpg", "png", "bmp", "jpeg"], // 上传文件的类型
                fileSize: 1024 * 1024 * 10                  // 上传文件的大小 10M
            };
            /*点击图片的文本框*/
            $(".file").change(function () {
                var idFile = $(this).attr("id");
                var file = document.getElementById(idFile);

                var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
                var fileList = file.files; //获取的图片文件

                var input = $(this).parent();//文本框的父亲元素
                var imgArr = [];
                //遍历得到的图片文件
                var numUp = imgContainer.find(".up-section").length;
                var totalNum = numUp + fileList.length;  //总的数量
                if (fileList.length > maxupload || totalNum > maxupload) {
                    alert("上传图片数目不可以超过" + maxupload + "个，请重新选择");  //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
                } else if (numUp < maxupload) {

                    fileList = validateUp(fileList);
                    for (var i = 0; i < fileList.length; i++) {
                        var filedata = fileList[i];
                        console.log(filedata);
                        var imgUrl = window.URL.createObjectURL(fileList[i]);
                        imgArr.push(imgUrl);
                        var $section = $("<section class='up-section fl loading'>");
                        imgContainer.prepend($section);
                        var $span = $("<span class='up-span'>");
                        $span.appendTo($section);

                        var $img0 = $("<img class='close-upimg'>").on("click", function (event) {
                            event.preventDefault();
                            event.stopPropagation();
                            $(".works-mask").show();
                            delParent = $(this).parent();
                        });
                        $img0.attr("src", "__PUBLIC__/Admin/images/a7.png").appendTo($section);
                        var $img = $("<img class='up-img up-opcity'>");
                        $img.attr("src", imgArr[i]);
                        $img.appendTo($section);

                        var formData = new FormData();
                        formData.append("download", filedata);
                        $.ajax({
                            url: "{:U('File/uploadImage')}",
                            type: "POST",
                            data: formData,
                            /**
                             *必须false才会自动加上正确的Content-Type
                             */
                            contentType: false,
                            /**
                             * 必须false才会避开jQuery对 formdata 的默认处理
                             * XMLHttpRequest会对 formdata 进行正确的处理
                             */
                            processData: false,
                            success: function (data) {
                                $('.js-pic_url').val(data.path);

                            },
                            error: function () {
                                alert("上传失败！");
//                                $("#imgWait").hide();
                            }
                        });
                        var $p = $("<p class='img-name-p'>");
                        $p.html(fileList[i].name).appendTo($section);
                        var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
                        $input.appendTo($section);
                        var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
                        $input2.appendTo($section);

                    }
                }
                setTimeout(function () {
                    $(".up-section").removeClass("loading");
                    $(".up-img").removeClass("up-opcity");
                }, 450);
                numUp = imgContainer.find(".up-section").length;
                if (numUp >= maxupload) {
                    $(this).parent().hide();
                }

                //input内容清空
                $(this).val("");
            });



            $(".z_photo").delegate(".close-upimg", "click", function () {
                $(".works-mask").show();
                delParent = $(this).parent();
            });

            $(".wsdel-ok").click(function () {
                $(".works-mask").hide();
                var numUp = delParent.siblings().length;
                if (numUp < maxupload + 1) {
                    delParent.parent().find(".z_file").show();
                }
                delParent.remove();

            });

            $(".wsdel-no").click(function () {
                $(".works-mask").hide();
            });

            function validateUp(files) {
                var arrFiles = [];//替换的文件数组
                for (var i = 0, file; file = files[i]; i++) {
                    //获取文件上传的后缀名
                    var newStr = file.name.split("").reverse().join("");
                    if (newStr.split(".")[0] != null) {
                        var type = newStr.split(".")[0].split("").reverse().join("");
                        console.log(type + "===type===");
                        if (jQuery.inArray(type, defaults.fileType) > -1) {
                            // 类型符合，可以上传
                            if (file.size >= defaults.fileSize) {
                                alert(file.size);
                                alert('您这个"' + file.name + '"文件大小过大');
                            } else {
                                // 在这里需要判断当前所有文件中
                                arrFiles.push(file);
                            }
                        } else {
                            alert('您这个"' + file.name + '"上传类型不符合');
                        }
                    } else {
                        alert('您这个"' + file.name + '"没有类型, 无法识别');
                    }
                }
                return arrFiles;
            }

        });
    </script>
</block>
